<template>
  <view class="post-container">
    <view class="form-box">
      <input 
        v-model="form.title" 
        placeholder="例如: XX乡村学校急需数学老师" 
        class="input-item"
      />
      <input 
        v-model="form.schoolName" 
        placeholder="请输入学校全名" 
        class="input-item"
      />
      <view class="subject-picker">
        <picker 
          mode="selector" 
          :range="subjects" 
          @change="handleSubjectChange"
          class="picker"
        >
          <view class="picker-content">
            <text class="placeholder" v-if="!form.subject">请选择所需支教科目</text>
            <text v-else>{{ form.subject }}</text>
          </view>
        </picker>
      </view>
      <textarea 
        v-model="form.content" 
        placeholder="请描述您的学校具体需求、现状等信息" 
        class="textarea-item"
      />
      <view class="image-uploader">
        <view class="title">添加图片(选填)</view>
        <view class="image-list">
          <view 
            class="image-item" 
            v-for="(img, index) in form.images" 
            :key="index"
          >
            <image :src="img" mode="aspectFill" />
            <text class="delete-btn" @click="deleteImage(index)">×</text>
          </view>
          <view 
            class="upload-btn" 
            @click="chooseImage" 
            v-if="form.images.length < 3"
          >
            <text class="icon">+</text>
            <text class="tip">最多3张</text>
          </view>
        </view>
      </view>
      <button 
        class="submit-btn" 
        :disabled="!isValid"
        @click="handleSubmit"
      >
        发布需求
      </button>
      
      <view class="why-important">
        <view class="title">为什么支教很重要?</view>
        <text class="content">支教能够为乡村学校带来宝贵的教育资源，帮助缩小城乡教育差距。通过支教，我们可以为乡村孩子们提供更多的学习机会和更广阔的视野，同时也能促进教育公平，推动乡村教育的发展。您的参与将为乡村教育带来积极的改变!</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        schoolName: '',
        subject: '',
        content: '',
        images: []
      },
      subjects: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '音乐', '美术', '体育']
    }
  },
  computed: {
    isValid() {
      return this.form.title && 
             this.form.schoolName && 
             this.form.subject && 
             this.form.content
    }
  },
  methods: {
    handleSubjectChange(e) {
      this.form.subject = this.subjects[e.detail.value]
    },
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.form.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.form.images = [...this.form.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.form.images.splice(index, 1)
    },
    async handleSubmit() {
      if (!uni.getStorageSync('userInfo')) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({ url: '/pages/login/index' })
        }, 1500)
        return
      }
      
      uni.showLoading({ title: '发布中...' })
      try {
        const uploadedImages = []
        if(this.form.images.length > 0) {
          for(let img of this.form.images) {
            const res = await this.uploadImage(img)
            uploadedImages.push(res.url)
          }
        }
        
        await this.$api.createPost({
          ...this.form,
          images: uploadedImages
        })
        
        uni.showToast({ 
          title: '发布成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' })
        }, 1500)
      } catch(e) {
        uni.showToast({
          title: '发布失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },
    uploadImage(tempFilePath) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.$api.baseUrl + '/upload',
          filePath: tempFilePath,
          name: 'file',
          success: (res) => {
            const data = JSON.parse(res.data)
            resolve(data)
          },
          fail: reject
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.post-container {
  padding: 60rpx;
  
  .form-box {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    
    .input-item {
      height: 80rpx;
      border-bottom: 1rpx solid #eee;
      margin-bottom: 30rpx;
      padding: 0 20rpx;
    }
    
    .subject-picker {
      border-bottom: 1rpx solid #eee;
      margin-bottom: 30rpx;
      
      .picker {
        height: 80rpx;
        
        .picker-content {
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 20rpx;
          
          .placeholder {
            color: #999;
          }
        }
      }
    }
    
    .textarea-item {
      width: 100%;
      height: 300rpx;
      border: 1rpx solid #eee;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;
      font-size: 28rpx;
    }
    
    .image-uploader {
      margin: 30rpx 0;
      
      .title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .image-item {
          position: relative;
          width: 180rpx;
          height: 180rpx;
          
          image {
            width: 100%;
            height: 100%;
            border-radius: 12rpx;
          }
          
          .delete-btn {
            position: absolute;
            top: -20rpx;
            right: -20rpx;
            width: 40rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            background: rgba(0,0,0,0.5);
            color: #fff;
            border-radius: 50%;
            font-size: 32rpx;
          }
        }
        
        .upload-btn {
          width: 180rpx;
          height: 180rpx;
          border: 2rpx dashed #ddd;
          border-radius: 12rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          
          .icon {
            font-size: 60rpx;
            color: #999;
            margin-bottom: 10rpx;
          }
          
          .tip {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
    
    .submit-btn {
      margin-top: 50rpx;
      background: rgba(91, 192, 235, 0.8);
      color: #fff;
      border-radius: 40rpx;
      
      &[disabled] {
        background: #ccc;
      }
    }
    
    .why-important {
      margin-top: 60rpx;
      padding-top: 30rpx;
      border-top: 1rpx solid #eee;
      text-align: center;
      
      .title {
        font-size: 28rpx;
        color: #5bc0eb;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      
      .content {
        font-size: 24rpx;
        color: #5bc0eb;
        line-height: 1.6;
        opacity: 0.8;
      }
    }
  }
}
</style> 